<template>
  <div class="box">
    <div class="content">
      <div class="title" v-html="info.title" />
      <div class="middle_one">
        <div class="left">发布日期：{{ info.updateDate }}</div>
        <div class="right">访问次数：{{ info.hotpots || 0 }}</div>
      </div>
      <div class="middle_two" v-html="info.summary" />
      <div class="middle_three">
        <div>作者：{{ info.author ? info.author : "" }}</div>
        <div>发生地点：{{ info.eventPlace ? info.eventPlace : "" }}</div>
        <div>内容来源：{{ info.website ? info.website : "" }}</div>
      </div>
      <div class="middle_four">
        <div class="item">访问地址：</div>
        <div class="item color" @click="goopen(info.url)">{{ info.url }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  filters: {},
  data() {
    return {
      info: null,
    };
  },
  created() {
    this.info = JSON.parse(
      window.sessionStorage.getItem("shishiredian_detail")
    );
    console.log(this.info);
  },
  methods: {
    goopen(e) {
      window.open(e, "_blank");
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  display: flex;
  align-content: center;
  justify-content: center;
  padding-top: 40px;
  .content {
    width: 1000px;
    text-align: center;
    ::v-deep em {
      color: red;
    }
    .title {
      font-size: 24px;
    }
    .middle_one {
      height: 45px;
      background: #f0f7ff;
      line-height: 45px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 20px;
      font-size: 16px;
      font-weight: 400;
      color: #3b95ff;
      margin-top: 20px;
    }
    .middle_two {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      margin-top: 40px;
      text-align: left;
    }
    .middle_three {
      text-align: left;
      margin-top: 40px;
      font-size: 16px;
      font-weight: 400;
      line-height: 40px;
    }

    .middle_four {
      text-align: left;
      margin-top: 20px;
      // background-color: rgba(184, 184, 184, 0.2);
      font-size: 16px;
      padding: 34px 0px;

      .item {
        display: inline-block;
      }

      .color {
        display: inline-block;
        color: #3b95ff;
        word-wrap: break-word;
        vertical-align: top;
        cursor: pointer;
        width: 80%;
      }
    }
  }
}

::v-deep .el-dialog__body {
  padding-bottom: 0;
}
</style>
